Selecciones y join de datos en D3.js

IIC2026 2020-2

Join de datos en D3.js I

Selecciones y join de datos en D3.js

IIC2026 2020-2

Vincular datos con elementos

Vincular datos con elementos


Podemos generar un vínculo de marcas y canales con datos mediante código.


<svg>
  <rect></rect>
  <circle></circle>
  <path></path>
</svg>
          

<svg>
  <rect></rect>
  <circle></circle>
  <path></path>
</svg>
          


            const datos = [23, 45, 120, 64];
          

<svg>
  <rect></rect>
  <circle></circle>
  <path></path>
</svg>
          


            const datos = [
              {nombre: "Ana", edad: 23},
              {nombre: "Bea", edad: 44},
              ...
            ];
          

<svg id="svg" width="400" height="250">
  <rect></rect>
  <rect></rect>
  <rect></rect>
  <rect></rect>
</svg>
          

<svg id="svg" width="400" height="250">
  <rect></rect>
  <rect></rect>
  <rect></rect>
  <rect></rect>
</svg>
          


            d3.select("#svg")
              .selectAll("rect");
          

<svg id="svg" width="400" height="250">
  <rect></rect>
  <rect></rect>
  <rect></rect>
  <rect></rect>
</svg>
          


            d3.select("#svg")
              .selectAll("rect");
          

selección svg rect rect rect rect

seleccion.data



            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);
          

seleccion.data



            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);
          

  • Hay datos que no se le asocian elementos
  • Hay elementos y datos que se asocian entre ellos
  • Hay elementos que no se le asocian datos

seleccion.data



            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);
          

  • Hay datos que no se le asocian elementos ➡️ enter
  • Hay elementos y datos que se asocian entre ellos ➡️ update
  • Hay elementos que no se le asocian datos ➡️ exit

seleccion.data


  • Hay datos que no se le asocian elementos ➡️ enter
  • Hay elementos y datos que se asocian entre ellos ➡️ update
  • Hay elementos que no se le asocian datos ➡️ exit



Datos Enter Update Elementos Exit

Update



            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);
          

            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- 120 -->
              <rect></rect> <!-- 64 -->
            </svg>
          

Update



            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);
          

            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- 120 -->
              <rect></rect> <!-- 64 -->
            </svg>
          

Update



            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);

            update.attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100);
          

            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- 120 -->
              <rect></rect> <!-- 64 -->
            </svg>
          

Update



            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);
            
            update.attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100);
          

            <svg id="svg" width="400" height="250">
              <rect width="50" y="0" x="0"></rect> <!-- 23 -->
              <rect width="50" y="0" x="100"></rect> <!-- 45 -->
              <rect width="50" y="0" x="200"></rect> <!-- 120 -->
              <rect width="50" y="0" x="300"></rect> <!-- 64 -->
            </svg>
          

Update



            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);
            
            update.attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100)
              .attr("height", (d, i, all) => 2 * d);
          

            <svg id="svg" width="400" height="250">
              <rect width="50" y="0" x="0"></rect> <!-- 23 -->
              <rect width="50" y="0" x="100"></rect> <!-- 45 -->
              <rect width="50" y="0" x="200"></rect> <!-- 120 -->
              <rect width="50" y="0" x="300"></rect> <!-- 64 -->
            </svg>
          

Update



            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);
            
            update.attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100)
              .attr("height", (d, i, all) => 2 * d);
          

            <svg id="svg" width="400" height="250">
              <rect width="50" y="0" x="0" height="46"></rect> <!-- 23 -->
              <rect width="50" y="0" x="100" height="90"></rect> <!-- 45 -->
              <rect width="50" y="0" x="200" height="240"></rect> <!-- 120 -->
              <rect width="50" y="0" x="300" height="128"></rect> <!-- 64 -->
            </svg>
          

Update



            const datos = [23, 45, 120, 64];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);
            
            update.attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100)
              .attr("height", (d, i, all) => 2 * d);
          

Exit


            <svg id="svg" width="400" height="250">
              <rect></rect>
              <rect></rect>
              <rect></rect>
              <rect></rect>
            </svg>
          

            const datos = [23, 45];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);
          

            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- ? -->
              <rect></rect> <!-- ? -->
            </svg>
          

Exit


            <svg id="svg" width="400" height="250">
              <rect></rect>
              <rect></rect>
              <rect></rect>
              <rect></rect>
            </svg>
          

            const datos = [23, 45];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);

            update.exit().remove();
          

            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- ? -->
              <rect></rect> <!-- ? -->
            </svg>
          

Exit


            <svg id="svg" width="400" height="250">
              <rect></rect>
              <rect></rect>
              <rect></rect>
              <rect></rect>
            </svg>
          

            const datos = [23, 45];

            const update = d3.select("#svg")
              .selectAll("rect")
              .data(datos);

            update.exit().remove();
          

            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
            </svg>
          

Enter


            <svg id="svg" width="400" height="250">
            </svg>
          

            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos);
          

            <svg id="svg" width="400" height="250">
              <!-- ? -->
            </svg>
          

Enter


            <svg id="svg" width="400" height="250">
            </svg>
          

            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos)
              .enter();
          

            <svg id="svg" width="400" height="250">
              <!-- ? -->
            </svg>
          

Enter


            <svg id="svg" width="400" height="250">
            </svg>
          

            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos)
              .enter()
              .append("rect");
          

            <svg id="svg" width="400" height="250">
              <!-- ? -->
            </svg>
          

Enter


            <svg id="svg" width="400" height="250">
            </svg>
          

            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos)
              .enter()
              .append("rect");
          

            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- 120 -->
              <rect></rect> <!-- 64 -->
            </svg>
          

Enter


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos)
              .enter()
              .append("rect")
              .attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100)
              .attr("height", (d, i, all) => 2 * d);
          

            <svg id="svg" width="400" height="250">
              <rect></rect> <!-- 23 -->
              <rect></rect> <!-- 45 -->
              <rect></rect> <!-- 120 -->
              <rect></rect> <!-- 64 -->
            </svg>
          

Enter


            const datos = [23, 45, 120, 64];

            d3.select("#svg")
              .selectAll("rect")
              .data(datos)
              .enter()
              .append("rect")
              .attr("width", 50)
              .attr("y", 0)
              .attr("x", (d, i, all) => i * 100)
              .attr("height", (d, i, all) => 2 * d);
          

            <svg id="svg" width="400" height="250">
              <rect width="50" y="0" x="0" height="46"></rect> <!-- 23 -->
              <rect width="50" y="0" x="100" height="90"></rect> <!-- 45 -->
              <rect width="50" y="0" x="200" height="240"></rect> <!-- 120 -->
              <rect width="50" y="0" x="300" height="128"></rect> <!-- 64 -->
            </svg>
          

const svg = d3.select("body").append("svg");

const datos = [150, 256, 130, 0, 23, 422, 235];

svg.attr("width", 50 + datos.length * 100).attr("height", 500);

svg
  .selectAll("rect")
  .data(datos)
  .enter()
  .append("rect")
  .attr("width", 50)
  .attr("fill", "magenta")
  .attr("height", (d) => d)
  .attr("x", (_, i) => 50 + i * 100);
          

Join de datos en D3.js I

Selecciones y join de datos en D3.js

IIC2026 2020-2


¡Deja tus preguntas en los comentarios!